<template>
  <div class="container">
    <el-row :gutter="12" class="r">
      <el-col :span="8" v-for="one in viewCard" :key="one" class="c">
        <el-card shadow="hover">
          <div class="t" slot="header">
            <h1 class="bigfont">{{ one.dateString }}</h1>
            <h1>{{ one.title }} : </h1>
            <h1 style="margin-left: 20px;color: #1c6ca1;">{{ one.count }}</h1>
          </div>
          <div class="rowDet">
            <h2>总计{{ one.title }}</h2>
            <h2>{{ one.totalCount }}</h2>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="r">
      <el-col>
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <h1>平台产品审核</h1>
            <selector enum="ZuObjectTypeEnum" class="sel" v-model="objectType"/>
          </div>
          <!--          需要修改获取接口  显示信息-->
          <my-list ref="ProductList" :url="url" :page-size="pageSize" :store="true"
                   style="width: 100%;margin-top:20px;">
            <el-table-column type="index" clign="center" width="50"></el-table-column>
            <!--<template slot-scope="scope"></template>-->
            <el-table-column label="名称" align="center" prop="name"></el-table-column>
            <el-table-column align="center" label="城市" prop="city.name"></el-table-column>
            <el-table-column align="center" label="地址" prop="address"></el-table-column>
            <el-table-column align="center" label="状态" prop="status_res">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.status">通过</el-tag>
                <el-tag type="warning" v-if="!scope.row.status">不通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发布人" prop="createBy.name"></el-table-column>
            <el-table-column align="center" label="创建时间" prop="createAt"></el-table-column>
            <!--      <el-table-column align="center" label="更新时间" prop="updateAt"></el-table-column>-->
            <el-table-column label="操作" align="center" width="220">
              <template slot-scope="scope">
                <el-button @click="set_click(scope.row)" size="mini" v-if="!scope.row.status" type="success">
                  通过
                </el-button>
                <el-button @click="set_click(scope.row)" size="mini" v-if="scope.row.status" type="warning">
                  不通过
                </el-button>
              </template>
            </el-table-column>
          </my-list>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="r" :gutter="12">
      <el-col :span="8">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <h1>排行管理</h1>
            <selector enum="ZuObjectTypeEnum" class="sel" v-model="orderType"/>
          </div>
          <!--          需要修改获取接口  显示信息-->
          <my-list ref="OrderList" :url="orderUrl" @param="preload"  :page-size="pageSize" :store="true"
                   style="width: 100%;margin-top:20px;">
            <el-table-column type="index" clign="center" width="50"></el-table-column>
<!--            <el-table-column label="标题" align="center">-->
<!--              <template slot-scope="scope">-->
<!--                <div class="link" @click="edit_click(scope.row)">{{ scope.row.name }}</div>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column align="center" label="内容标题" prop="info.name"></el-table-column>
            <el-table-column align="center" label="点击量" prop="clickCount"></el-table-column>
            <el-table-column align="center" label="平台排行" prop="order"></el-table-column>
          </my-list>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <h1>平台用户</h1>
<!--            <selector enum="ZuMemberType" class="sel" v-model="memberType"  />-->
          </div>
          <!-- 需要修改获取接口  显示信息-->
          <el-tabs type="border-card">
            <el-tab-pane label="预约咨询">
              <my-list ref="PreLookList" :url="preBookUrl"  @loaded="procPreBookData" :query="query" :page-size="pageSize" :store="true"
                       style="width: 100%;margin-top:20px;">
                <el-table-column type="index" clign="center" width="50"></el-table-column>
                <!--<template slot-scope="scope"></template>-->
                <el-table-column align="center" label="客户名称" prop="user.name"></el-table-column>
                <el-table-column align="center" label="业务类型" prop="type_res">
                  <template slot-scope="scope">
                    <el-tag>{{scope.row.type_res}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="手机号码" prop="user.mobile"></el-table-column>
                <el-table-column align="center" label="所在城市" prop="city.name"></el-table-column>
                <el-table-column align="center" label="预约状态" prop="status_res">
                  <template slot-scope="scope">
                    <el-tag>{{scope.row.status_res}}</el-tag>
                  </template>
                </el-table-column>
                <!--            <el-table-column align="center" label="意向" prop="target.name"></el-table-column>-->
                <el-table-column align="center" label="备注" prop="remark"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createAt"></el-table-column>
                <!--            <el-table-column align="center" label="更新时间" prop="updateAt"></el-table-column>-->
<!--                <el-table-column label="操作" align="center" width="180">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-button @click="edit_click(scope.row)" size="small">-->
<!--                      编辑-->
<!--                    </el-button>-->
<!--                    &lt;!&ndash;                    <el-button @click="set_click(scope.row)" size="small">&ndash;&gt;-->
<!--                    &lt;!&ndash;                        设置状态&ndash;&gt;-->
<!--                    &lt;!&ndash;                    </el-button>&ndash;&gt;-->
<!--                    <el-button @click="delete_click(scope.row)" size="small" type="danger">-->
<!--                      删除-->
<!--                    </el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
              </my-list>
            </el-tab-pane>
            <el-tab-pane label="认证审核">
              <my-list ref="MemberList" :url="memberUrl"   :page-size="pageSize" :store="true"
                       style="width: 100%;margin-top:20px;">
                <el-table-column type="index" clign="center" width="50"></el-table-column>
                <el-table-column label="昵称" align="center">
                  <template slot-scope="scope">
                    <div class="link" @click="edit_click(scope.row)">{{ scope.row.name }}</div>
                  </template>
                </el-table-column>
                <!--            <el-table-column align="center" label="座机号码" prop="phone"></el-table-column>-->
                <el-table-column label="头像" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.url"/>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="登录名" prop="loginName"></el-table-column>
                <el-table-column align="center" label="手机号" prop="mobile"></el-table-column>
                <el-table-column align="center" label="会员状态" prop="status" v-if="query.type === 'Auth' ">
                  <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status">通过</el-tag>
                    <el-tag type="warning" v-if="!scope.row.status">拒绝</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="备注" prop="remark"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createAt"></el-table-column>
                <!--            <el-table-column align="center" label="更新时间" prop="updateAt"></el-table-column>-->
                <el-table-column label="操作" align="center" width="180">
                  <template slot-scope="scope">
                    <el-button @click="set_member_click(scope.row)" size="mini"
                               v-if="query.type === 'Auth' && !scope.row.status" type="success">
                      通过
                    </el-button>
                    <el-button @click="set_member_click(scope.row)" size="mini"
                               v-if="query.type === 'Auth' && scope.row.status" type="warning">
                      拒绝
                    </el-button>
                  </template>
                </el-table-column>
              </my-list>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data: function () {
    return {
      pageSize: 10,
      viewCard: [],
      urlType: "build",
      url: "/zu/build/list",
      orderUrl:"/zu/order/list",
      memberUrl:"/zu/member/list",
      preBookUrl:"/zu/prebook/list",
      ZuPreBookEnum: jv.ZuPreBookEnum.getData(),
      ZuCustomerStatusEnum: jv.ZuCustomerStatusEnum.getData(),
      objectType: '',
      orderType: '',
      memberType: '',
      query:{
        type:"Auth"
      }
    }
  },
  mounted() {
    this.init()
    this.loadData()
  },
  watch: {
    objectType(val) {
      if (val === "Office") {
        this.getProductList("build")
      }
      if (val === "Store") {
        this.getProductList("store")
      }
      if (val === "Factory") {
        this.getProductList("factory")
      }
      if (val === "Stock") {
        this.getProductList("stock")
      }
      if (val === "Land") {
        this.getProductList("land")
      }
    },
    orderType(val){
      if (val === "Office") {
        this.getOrderList("build")
      }
      if (val === "Store") {
        this.getOrderList("store")
      }
      if (val === "Factory") {
        this.getOrderList("factory")
      }
      if (val === "Stock") {
        this.getOrderList("stock")
      }
      if (val === "Land") {
        this.getOrderList("land")
      }
    }
  },
  methods: {
    preload(param) {
      //添加查询参数，修改分页参数等。
      //param.type = this.$route.params.type
      param.type = this.orderType
    },
    procPreBookData(res) {
      res.data.data.forEach(it => {
        //如果是组合实体，设置 it.id=...
        //处理枚举 jv.枚举.fillRes(it,字段)
        jv.ZuPreBookEnum.fillRes(it,"type")
        jv.ZuCustomerStatusEnum.fillRes(it,"status")
      });
    },
    init() {
      this.$http.post("/zu/index/info").then(res => {
        let json = res.data.data
        console.log(json)
        this.viewCard = json.viewCards
      })
    },
    loadData(pageNumber) {
      this.$refs.ProductList.loadData(pageNumber);
      this.$refs.OrderList.loadData(pageNumber);
      this.$refs.MemberList.loadData(pageNumber);
      this.$refs.PreLookList.loadData(pageNumber);
    },
    set_click(row) {
      //设置事件
      let rowId = row.id;
      //设置通过状态
      this.$http.post("/zu/" + this.urlType + "/set-status", {id: rowId, status: !row.status}).then(res => {
        this.loadData();
      })
    },
    set_member_click(row) {
      //设置事件
      var rowId = row.id;
      //设置通过状态
      this.$http.post("/zu/member/set-status", {id: rowId, status: !row.status}).then(res => {
        this.loadData();
      })
    },
    getProductList(type){
      let that = this
      this.url = "/zu/"+type+"/list"
      this.urlType = type
      setTimeout(function () {
        that.loadData()
      }, 100)
    },
    getOrderList(type){
      let that = this
      this.orderUrl = "/zu/order/list"
      setTimeout(function () {
        that.loadData()
      }, 100)
    }
  }
}
</script>

<style scoped>

.container {
  background-color: #f3f8fb;
}

.r {
  width: 100%;
  margin-bottom: 10px;
}

.sel {
  width: 100px;
  float: right;
  padding: 3px 0;
}

.c {
  margin-bottom: 18px;
}

.bigfont {
  font-size: 40px;
  color: #1c6ca1;
  margin-right: 10px;
}

.t {
  display: flex;
  height: 30px;
  line-height: 30px;
}

.rowDet {
  display: flex;
  justify-content: space-between;
  color: gray;
  margin-top: 10px;
}

.clearfix {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}


</style>
